<template>
  <view>
    <!-- 分类导航栏 -->
    <view class="nav">
      <block v-for="(item , i) in navName" :key="i">
        <view :class="['title', i === active ? 'active' : '']" @click="activeChanged(i)">
          {{item}}
        </view>
      </block>
    </view>
    <!-- 二级页面 -->
    <view class="list">
      <view class="order-item" v-for="(item,i) in alist">
        <view class="gotoDetail" @click="gotoDetail(item)">
          <view class="head">
            <text class="type">{{navName[active]}}</text>
            <text class="shop">{{item.shopname}}</text>
            <text class="status" style="color: #F77214;" v-if="item.status=='待支付' || '制作中'">{{item.status}}</text>
            <text class="status" style="color: #bebebe;" v-if="item.status=='已取消'">{{item.status}}</text>
            <text class="status" v-if="item.status=='已完成'">{{item.status}}</text>
          </view>
          <view class="body">
            <view class="items">
              <view class="item" v-for="(v,i) in item.item" :key="i" v-if="i<3">
                <image :src="v.picture"></image>
                <text>{{v.name}}</text>
              </view>
            </view>
            <view class="total">
              <text>￥{{item.price}}</text>
              <text style="color: #bebebe;">共{{item.total}}件</text>
            </view>
          </view>
        </view>
        <view class="bottom">
          <view class="button" v-if="item.status=='待支付'">
            <button style="color: #bebebe;">取消订单</button>
            <button style="color: white;background-color: #F77214;">立即支付</button>
          </view>
          <view class="button" v-if="item.status=='制作中'">
            <button>催单</button>
          </view>
          <view class="button" v-if="item.status=='已取消' || item.status=='已完成'">
            <button>再来一单</button>
          </view>
        </view>
      </view>
    </view>

  </view>
</template>

<script>
  import http from '../../utils/http.js';
  export default {
    data() {
      return {
        navName: ['堂食', '外送', '商城订单'],
        active: 0,
        list: [],
        alist: [{
          'shopname': '黛西餐厅（中海大厦点）',
          'status': '待支付',
          'item': [{
            'name': '热烤鸡胸蔬菜沙拉',
            'picture': 'https://cdn3.axureshop.com/demo/2116044/images/%E7%BB%84%E4%BB%B6_%E8%A7%84%E8%8C%83/u654.png'
          }, {
            'name': '热烤鸡胸蔬菜沙拉',
            'picture': 'https://cdn3.axureshop.com/demo/2116044/images/%E7%BB%84%E4%BB%B6_%E8%A7%84%E8%8C%83/u654.png'
          }, {
            'name': '热烤鸡胸蔬菜沙拉',
            'picture': 'https://cdn3.axureshop.com/demo/2116044/images/%E7%BB%84%E4%BB%B6_%E8%A7%84%E8%8C%83/u654.png'
          }, {
            'name': '热烤鸡胸蔬菜沙拉',
            'picture': 'https://cdn3.axureshop.com/demo/2116044/images/%E7%BB%84%E4%BB%B6_%E8%A7%84%E8%8C%83/u654.png'
          }],
          'price': 42,
          'total': 3
        }, {
          'shopname': '黛西餐厅（中海大厦点）',
          'status': '制作中',
          'item': [{
            'name': '热烤鸡胸蔬菜沙拉',
            'picture': 'https://cdn3.axureshop.com/demo/2116044/images/%E7%BB%84%E4%BB%B6_%E8%A7%84%E8%8C%83/u654.png'
          }, {
            'name': '热烤鸡胸蔬菜沙拉',
            'picture': 'https://cdn3.axureshop.com/demo/2116044/images/%E7%BB%84%E4%BB%B6_%E8%A7%84%E8%8C%83/u654.png'
          }, {
            'name': '热烤鸡胸蔬菜沙拉',
            'picture': 'https://cdn3.axureshop.com/demo/2116044/images/%E7%BB%84%E4%BB%B6_%E8%A7%84%E8%8C%83/u654.png'
          }, {
            'name': '热烤鸡胸蔬菜沙拉',
            'picture': 'https://cdn3.axureshop.com/demo/2116044/images/%E7%BB%84%E4%BB%B6_%E8%A7%84%E8%8C%83/u654.png'
          }],
          'price': 42,
          'total': 3
        }]
      }
    },
    methods: {
      gotoDetail(item) {
        uni.navigateTo({
          url: '/subpkg/listDetail/listDetail?item=' + JSON.stringify(item),
          // success: res => {},
          // fail: () => {},
          // complete: () => {}
        });
      },
      activeChanged(i) {
        this.active = i
        this.getList()
      },
      getList() {
        http({
          url: `/list`,
          params: {
            active: this.navName[this.active]
          },
          success: (res) => {
            if (res.data.msg == '获取成功') {
              this.list = res.data.data2;
            } else {
              uni.showToast({
                title: res.data.msg,
                icon: 'error'
              })
            }
          }
        })

      },
    },
    onShow() {
      this.getList()

    }
  }
</script>

<style lang="scss">
  // 分类导航栏
  .nav {
    display: flex;
    justify-content: space-around;
    margin: 10rpx;
    // text-align: center;
    // background-color: whitesmoke;

    .title {
      font-size: 30rpx;
      line-height: 40rpx;
      padding: 20rpx 0;


      &.active {

        position: relative;
        color: #F77214;

        &::before {
          content: ' ';
          display: block;
          width: 100%;
          height: 2px;
          background-color: #F77214;
          position: absolute;
          // left: -10rpx;
          top: 100%;
          transform: translateY(80%);

        }
      }
    }
  }

  // 每个订单
  .list {
    .order-item {
      margin: 44rpx 44rpx;
      background-color: white;
      border-radius: 20rpx;

      .gotoDetail {
        display: flex;
        flex-direction: column;
        align-items: center;

        .head {
          width: 90%;
          padding: 30rpx 0;
          border-bottom: solid 2rpx #bebebe;
          display: flex;
          align-items: center;

          .type {
            width: 120rpx;
            height: 40rpx;
            color: white;
            background-color: black;
            border-radius: 20rpx;
            font-size: 28rpx;
            text-align: center;
          }

          .shop {
            margin-left: 10rpx;
            font-size: 33rpx;
          }

          .status {
            font-size: 26rpx;
            margin-left: 20rpx;
          }
        }

        .body {
          display: flex;
          justify-content: space-around;
          align-items: center;

          .items {
            display: flex;

            .item {
              display: flex;
              flex-direction: column;
              padding: 20rpx 20rpx;

              image {
                width: 140rpx;
                height: 140rpx;
              }

              text {
                width: 150rpx;
                font-size: 26rpx;
                color: #bebebe;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              }
            }

          }

          .total {
            display: flex;
            flex-direction: column;

            text {
              padding: 10rpx;


            }
          }
        }
      }

      .bottom {

        .button {
          display: flex;
          justify-content: flex-end;


          button {
            border-radius: 30rpx;
            font-size: 28rpx;
            margin: 30rpx 20rpx;
          }

        }
      }
    }
  }
</style>
